﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="meta description">
<meta http-equiv="content-type" content="text/html;charset=utf-8">；
<title>Shop</title>

<!--=== Favicon ===-->
<link rel="shortcut icon" href="assets/img/favicon.ico"
	type="image/x-icon" />

<!--== Google Fonts ==-->
<link
	href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700"
	rel="stylesheet">

<!--=== Bootstrap CSS ===-->
<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
<!--=== Font-Awesome CSS ===-->
<link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
<!--=== Plugins CSS ===-->
<link href="assets/css/plugins.css" rel="stylesheet">
<!--=== Helper CSS ===-->
<link href="assets/css/helper.min.css" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link href="assets/css/style.css" rel="stylesheet">

<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

<!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<!--== Start Header Section ==-->
	<header id="header-area"> </header>
	<!--== End Header Section ==-->

	<!--== Start Page Breadcrumb ==-->
	<div class="page-breadcrumb-wrap">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="page-breadcrumb">
						<ul class="nav">
							<li><a href="index.html">Home</a></li>
							<li><a href="shop.html" class="active">Shop</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--== End Page Breadcrumb ==-->

	<!--== Page Content Wrapper Start ==-->
	<div id="page-content-wrapper">
		<div class="container">
			<div class="row">
				<!-- Sidebar Area Start -->
				<div class="col-lg-3">
					<div id="sidebar-area-wrap">
						<!-- Single Sidebar Item Start -->
						<div class="single-sidebar-wrap">
							<h2 class="sidebar-title">Shop By</h2>
							<div class="sidebar-body">
								<div class="shopping-option d-block d-sm-flex d-lg-block">
									<div class="shopping-option-item">
										<h4>品牌</h4>
										<ul class="sidebar-list" id="sidebar-list">
											<li><a href="#">Dolce <span>(19)</span></a></li>
											<li><a href="#">Gabbana <span>(4)</span></a></li>
											<li><a href="#">Nike <span>(3)</span></a></li>
											<li><a href="#">Nokia <span>(5)</span></a></li>
											<li><a href="#">Xiaomi <span>(7)</span></a></li>
											<li><a href="#">Other <span>(33)</span></a></li>
										</ul>
									</div>

									<div class="shopping-option-item">
										<h4>分类</h4>
										<ul class="sidebar-list" id="sidebar-list2">
											<li><a href="#">$0.00 - $9.99 <span>(2)</span></a></li>
											<li><a href="#">$10.00 - $19.99 <span>(3)</span></a></li>
											<li><a href="#">$20.00 - $29.99 <span>(5)</span></a></li>
											<li><a href="#">$30.00 - $39.99 <span>(2)</span></a></li>
											<li><a href="#">$40.00 - $49.99 <span>(10)</span></a></li>
											<li><a href="#">$50.00 - $59.99 <span>(12)</span></a></li>
										</ul>
									</div>

									
								</div>
							</div>
						</div>
						<!-- Single Sidebar Item End -->

					</div>
				</div>
				<!-- Sidebar Area End -->

				<!-- Start Shop Page Content -->
				<div class="col-lg-9 order-first order-lg-last">
					<div class="shop-page-content-wrap">
						<div class="products-settings-option d-block d-md-flex">
							<div class="product-cong-left d-flex align-items-center">
								<ul class="product-view d-flex align-items-center">
									<li class="box-gird current"><i class="fa fa-th"></i></li>
									<li class="list"><i class="fa fa-list-ul"></i></li>
								</ul>
								<span class="show-items" id="show_items">Items 1 - 9 of 17</span>
							</div>

							<div
								class="product-sort_by d-flex align-items-center mt-3 mt-md-0">
								<label for="sort">Sort By:</label> <select name="sort" id="sort">
									<option value="Position">Relevance</option>
									<option value="Name Ascen">Name, A to Z</option>
									<option value="Name Decen">Name, Z to A</option>
									<option value="Price Ascen">Price low to heigh</option>
									<option value="Price Decen">Price heigh to low</option>
								</select>
							</div>
						</div>

						<div class="shop-page-products-wrap">
							<div class="products-wrapper">
								<div class="row" id="goodslist">
									<!-- Single Product Start -->
									<div class="col-lg-4 col-sm-6">
										<div class="single-product-item">
											<figure class="product-thumb">
												<a href="single-product.html"><img
													src="assets/img/product-1.jpg" alt="Product"></a>
												<a href="#" class="btn btn-round btn-cart"
													title="Quick View" data-toggle="modal"
													data-target="#quickView"><i class="fa fa-eye"></i></a>
											</figure>
											<div class="product-details">
												<h2 class="product-title">
													<a href="single-product.html">Rival Field Messenger</a>
												</h2>
												<div class="rating">
													<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i> <i class="fa fa-star"></i> <i
														class="fa fa-star"></i>
												</div>
												<span class="product-price">$40.99</span>

												<p class="pro-desc">Ideal for cold-weather training or
													work outdoors, the Chaz Hoodie promises superior warmth
													with every wear. Thick material blocks out the wind as
													ribbed cuffs and bottom band seal in body heat.</p>

												<div class="product-meta">
													<a href="#" class="btn btn-round btn-cart"
														title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
													<a href="wishlist.html" class="btn btn-round btn-cart"
														title="Add to Wishlist"><i class="fa fa-heart"></i></a> <a
														href="compare.html" class="btn btn-round btn-cart"
														title="Add to Compare"><i class="fa fa-exchange"></i></a>
												</div>
											</div>
										</div>
									</div>
									<!-- Single Product End -->


								</div>
							</div>
						</div>

						<div class="products-settings-option d-block d-md-flex">
							<nav class="page-pagination">
								<ul class="pagination" id="pagination">
									<li><a href="#" aria-label="Previous">&laquo;</a></li>
									<li><a class="current" href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#" aria-label="Next">&raquo;</a></li>
								</ul>
							</nav>

							
						</div>
					</div>
				</div>
				<!-- End Shop Page Content -->
			</div>
		</div>
	</div>
	<!--== Page Content Wrapper End ==-->

	<!--== Start Newsletter Area ==-->
	<div class="newsletter-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-9 m-auto">
					<!-- Newsletter Content Start -->
					<div
						class="newsletter-content-wrap text-center text-lg-left d-lg-flex">
						<h2>
							<i class="fa fa-envelope-square"></i> Sign up for Newsletter
						</h2>
						<div class="newsletter-form-wrap">
							<form id="subscribe-form" action="assets/php/subscribe.php"
								method="post">
								<input type="email" name="newsletter_email" id="address"
									placeholder="Enter Your Email Address" required />
								<button class="btn" type="submit">Subscribe</button>
							</form>
							<!-- Show Error & Success Message -->
							<div id="subscribeResult"></div>
						</div>
					</div>
					<!-- Newsletter Content End -->
				</div>

				<div class="col-lg-3 m-auto text-center text-lg-right">
					<!-- Social Icons Area Start -->
					<div class="social-icons">
						<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i
							class="fa fa-twitter"></i></a> <a href="#"><i
							class="fa fa-linkedin"></i></a> <a href="#"><i
							class="fa fa-youtube"></i></a>
					</div>
					<!-- Social Icons Area End -->
				</div>
			</div>
		</div>
	</div>
	<!--== End Newsletter Area ==-->

	<!--== Start Footer Area ==-->
	<footer id="footer-area"> </footer>
	<!--== End Footer Area ==-->

	<!-- Scroll to Top Start -->
	<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
	<!-- Scroll to Top End -->

	<!--== Product Quick View Modal Area Wrap ==-->
	<div class="modal" id="quickView" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true"><img
						src="assets/img/icons/cancel.png" alt="Close" class="img-fluid" /></span>
				</button>
				<div class="modal-body">
					<div class="quick-view-content single-product-page-content">
						<div class="row">
							<!-- Product Thumbnail Start -->
							<div class="col-lg-5 col-md-6">
								<div class="product-thumbnail-wrap">
									<div class="product-thumb-carousel owl-carousel">
										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="assets/img/single-pro-1.jpg" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="assets/img/single-pro-2.jpg" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="assets/img/single-pro-3.jpg" alt="Product" /></a>
										</div>

										<div class="single-thumb-item">
											<a href="single-product.html"><img class="img-fluid"
												src="assets/img/single-pro-4.jpg" alt="Product" /></a>
										</div>
									</div>
								</div>
							</div>
							<!-- Product Thumbnail End -->

							<!-- Product Details Start -->
							<div class="col-lg-7 col-md-6 mt-5 mt-md-0">
								<div class="product-details">
									<h2>
										<a href="single-product.html">Crown Summit Backpack</a>
									</h2>

									<div class="rating">
										<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
											class="fa fa-star"></i> <i class="fa fa-star-half"></i> <i
											class="fa fa-star-o"></i>
									</div>

									<span class="price">$52.00</span>

									<div class="product-info-stock-sku">
										<span class="product-stock-status text-success">In
											Stock</span> <span class="product-sku-status ml-5"><strong>SKU</strong>
											MH03</span>
									</div>

									<p class="products-desc">Ideal for cold-weathered training
										worked lorem ipsum outdoors, the Chaz Hoodie promises superior
										warmth with every wear. Thick material blocks out the wind as
										ribbed cuffs and bottom band seal in body heat Lorem ipsum
										dolor sit amet, consectetur adipisicing elit. Enim,
										reprehenderit.</p>
									<div class="shopping-option-item">
										<h4>Color</h4>
										<ul class="color-option-select d-flex">
											<li class="color-item black">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">Black</span>
												</div>
											</li>

											<li class="color-item green">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">green</span>
												</div>
											</li>

											<li class="color-item orange">
												<div class="color-hvr">
													<span class="color-fill"></span> <span class="color-name">Orange</span>
												</div>
											</li>
										</ul>
									</div>

									<div class="product-quantity d-flex align-items-center">
										<div class="quantity-field">
											<label for="qty">Qty</label> <input type="number" id="qty"
												min="1" max="100" value="1" />
										</div>

										<a href="cart.html" class="btn">Add to Cart</a>
									</div>
								</div>
							</div>
							<!-- Product Details End -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--== Product Quick View Modal Area End ==-->


	<!--=======================Javascript============================-->
	<!--=== Jquery Min Js ===-->
	<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
	<!--=== Jquery Migrate Min Js ===-->
	<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
	<!--=== Popper Min Js ===-->
	<script src="assets/js/vendor/popper.min.js"></script>
	<!--=== Bootstrap Min Js ===-->
	<script src="assets/js/vendor/bootstrap.min.js"></script>
	<!--=== Ajax Mail Js ===-->
	<script src="assets/js/ajax-mail.js"></script>
	<!--=== Plugins Min Js ===-->
	<script src="assets/js/plugins.js"></script>

	<!--=== Active Js ===-->
	<script defer="defer" type="text/javascript">
	$("#header-area").load("header");
	$("#footer-area").load("footer");
	var p_type = getQueryVariable("type");
	var p_id = getQueryVariable("id");
	var page = getQueryVariable("page");
	var p_s = getQueryVariable("s");
	var pageCount;
	var pageCurrent;
	var pageSize;
	var rowCount;
	var records_len;
	var goods_id;
	var params = {
		type:p_type,
		id:p_id,
		page:page,	
		s:p_s
	}
	//console.log(params);
	$.getJSON("/jyp/GoodsList/doGetGoodsListByType",params,function(result){
		console.log(result.data);
		initGoodsListData(result.data.records);
		initPageData(result.data);
		
	});
	
	function initPageData(data){
		pageCount = data.pageCount;
		pageCurrent = data.pageCurrent;
		pageSize = data.pageSize;
		rowCount = data.rowCount;
		records_len = data.records.length;
		goods_id = data.records[0].goodsId;
		initTopPageData();
		initFootPageData();
		initLeftPageData();
	}
	
	function initLeftPageData(){
		
		var params = {
			type:p_type,
			id:p_id
		}
		$.getJSON("/jyp/GoodsList/getBrandList",params,function(result){
			console.log(result.data);
			loadLeftPageData(result.data);
		});
		
		var params2 = {
				id:goods_id
		}
		$.getJSON("/jyp/GoodsList/getCateList",params2,function(result){
			console.log(result.data);
			loadLeftPageData2(result.data);
		});
	}
	
	function loadLeftPageData(data){
		var tbody = $("#sidebar-list");
		tbody.empty();
		var p;
		for(var i in data){
			p = "<li><a href='shop?type=brand&id="+data[i].brands_id+"&page=1'>"+data[i].brand_name+"<span>("+data[i].count+")</span></a></li>";
			tbody.append(p);
		}
	}
	
	function loadLeftPageData2(data){
		var tbody = $("#sidebar-list2");
		tbody.empty();
		var p;
		for(var i in data){
			p = "<li><a href='shop?type=category&id="+data[i].category_id+"&page=1'>"+data[i].category_name+"<span>("+data[i].count+")</span></a></li>";
			tbody.append(p);
		}
	}
	
	
	//初始化底部页面跳转框
	function initFootPageData(){
		initshowpagination();
	}
	
	function initshowpagination(){
		var tbody = $("#pagination");
		tbody.empty();
		var p;
		if(pageCurrent!=1){
			p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent - 1)+"' aria-label='Previous'>&laquo;</a></li>";
			tbody.append(p);
			p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent - 1)+"'>"+(pageCurrent - 1)+"</a></li>";
			tbody.append(p);
			p = "<li><a class='current' href=''>"+(pageCurrent)+"</a></li>";
			tbody.append(p);
			if(pageCurrent < pageCount){
				p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent + 1)+"'>"+(pageCurrent + 1)+"</a></li>";
				tbody.append(p);
			}
		}else{
			p = "<li><a class='current' href=''>"+(pageCurrent)+"</a></li>";
			tbody.append(p);
			if(pageCurrent < pageCount){
				p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent + 1)+"'>"+(pageCurrent + 1)+"</a></li>";
				tbody.append(p);
			}
			if(pageCurrent + 2 <= pageCount){
				p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent + 2)+"'>"+(pageCurrent + 2)+"</a></li>";
				tbody.append(p);
			}
		}
		if(pageCurrent!=pageCount){
			p = "<li><a href='shop?type="+p_type+"&id="+p_id+"&page="+(pageCurrent + 1)+"' aria-label='Next'>&raquo;</a></li>";
			tbody.append(p);
		}
	}
	
	function initTopPageData(){
		if(rowCount == 0){
			$("#show_items").html("查询不到结果");
		}else{
			$("#show_items").html("查询 "+ ((pageCurrent - 1) * pageSize)+" 到  " + ((pageCurrent - 1) * pageSize + records_len) + " 条结果,共 " + rowCount + " 条结果");
		}
	}
	
	function initGoodsListData(data){
		var tbody = $("#goodslist");
		tbody.empty();
		for(var i in data){
			var item = createItem(data[i]);
			tbody.append(item);
		}
	}
	
	function createItem(item){
		var i = "<div class='col-lg-4 col-sm-6'>" + 
			" <div class='single-product-item'>" +
			"<figure class='product-thumb'>" +
			"<a href='goodsinfo?id="+item.goodsId+"'><img src='assets/imageResource/"+item.imgUrl +
			"' alt='Product'></a>"+
			"</figure>" +
			"<div class='product-details'>" +
			"<h2 class='product-title'><a href='single-product.html'>"+ item.goodsName +
			"</a></h2>" +
			"<div class='rating'>" +
			"<i class='fa fa-star'></i>" +
			"<i class='fa fa-star'></i>" +
			"<i class='fa fa-star'></i>" +
			"<i class='fa fa-star'></i>" +
			"<i class='fa fa-star'></i>" +
			"</div>" +
			"<span class='product-price'>¥" + item.basePrice + "</span>" +
			"<div class='product-meta'>" + 
			"<a href='#' class='btn btn-round btn-cart' title='Add to Cart'><i class='fa fa-shopping-cart'></i></a>" +
			"</div>"+
			"</div>"+
			"</div>"+
			"</div>";
			return i;
	}
	function getQueryVariable(variable){
		var url = decodeURI(window.location.href);
		
	       var query = url.substring(url.lastIndexOf('?')).substring(1);
	       var vars = query.split("&");
	       for (var i=0;i<vars.length;i++) {
	               var pair = vars[i].split("=");
	               if(pair[0] == variable){
	            	   return pair[1];
	               }
	       }
	       return(false);
	}
</script>

</body>
</html>
